<template>
    <div class="row px-lg-5 ">
        <div class="col-lg-6">
            <div class="h4">国内疫情：<i class="bi bi-clock me-2"></i>{{showInfoData.times}}</div>
            <div
                class="d-flex justify-content-center align-items-center align-content-end flex-wrap justify-content-between ">
                <div class="w-50  p-2 infoBlock">
                    <span>现有确诊：</span>
                    <span class="text-danger fw-bold fs-6 text-nowrap">{{showInfoData.econNum}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>无症状感染：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.asymptomNum}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>疑似病例：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.sustotal}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>现有重症：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.econNum}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>累计确诊：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.gntotal}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>累计死亡：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.deathtotal}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>累计治愈：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.curetotal}}</span>
                </div>
                <div class="w-50 p-2 infoBlock">
                    <span>境外输入病例：</span>
                    <span class="text-danger fw-bold fs-6">{{showInfoData.jwsrNum}}</span>
                </div>
            </div>
            <div class="h4 d-flex">境外输入排行<span class="badge bg-danger  ms-3">Top</span></div>
            <div class="rank fs-6  p-3 ">
                <div v-for="(item,index) in showInfoData.jwsrTop " :key="item.enname">
                    <div :class="index<3?'text-danger':''">{{index+ 1 + '、' +item.name}}</div>
                    <div class="fw-bold" :class="index<3?'text-danger':''">{{item.jwsrNum}}</div>
                </div>
            </div>
            <div style="height:300px;width:100%;" ref="box1"></div>
        </div>
        <div class="col-12 col-lg-6">
            <div ref="mapDom" style="height:100%;width:100%;"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios'
import { echarts } from '../../../utils/echarts/index';
// 获取dom
const box1: any = ref(null);
const mapDom: any = ref(null);
const rankChartOption: any = ref({})
rankChartOption.value = {
    tooltip: {},
    legend: {
        top: 0,
        right: 30,
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [
        {
            name: '境外输入Top磅',
            type: 'bar',
            color: '#EE6666',
            data: []
        },
    ]
}
//地图的数据
let mapData: any = ref([]);
let showInfoData: any = ref([]);
// 下一级地图的id
const childrenId: any = ref("100000");
// 存一次疫情的地图
const mapEpidemic: any = ref([]);
// 数据处理
const mapRender = (data: any = [], mapData: any = []) => {
    let mapLocal: any = [];
    mapData.forEach((value: any, index: number) => {
        mapLocal.push(value.properties.name);
    });
    let city = ["北京", "重庆", "上海", "天津"];
    let area: any = {
        内蒙古: "内蒙古自治区",
        新疆: "新疆维吾尔自治区",
        广西: "广西壮族自治区",
        宁夏: "宁夏回族自治区",
        西藏: "西藏自治区",
        澳门: "澳门特别行政区",
        香港: "香港特别行政区",
    };

    // 便利处理字典
    let result = data.map((i: any, index: number) => {
        let name = "";
        // 有 conNum 说明有子级
        if (i.conNum) {
            return {
                name: mapLocal[index],
                value: Number(i.conNum),
            };
        } else {
            if (city.find((x: any) => x === i.name)) {
                name = i.name + "市";
            } else if (area[i.name]) {
                name = area[i.name];
            } else {
                name = i.name + "省";
            }
            return {
                name,
                value: Number(i.value),
            };
        }
    });

    // echarts 的数据配置选项 具体看官网
    let option = {
        title: {
            text: '国内疫情',
            subtext: '数据源于新浪',
            left: "right",
            sublink:
                'https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427',
        },
        tooltip: {
            trigger: "item",
            showDelay: 1,
            transitionDuration: 0.2,
        },
        visualMap: {
            left: "right",
            min: 0,
            max: 10000,
            inRange: {
                color: ['#3BA272', '#FBCE5A', '#FC8452', '#FF0000']
            },
            text: ["高", "低"],
            calculable: true,
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        series: [
            {
                name: "中国疫情地图",
                type: "map",
                roam: true,
                map: "china",
                zoom: 1.2,
                // 设置地图的文字
                label: {
                    show: true,
                    fontSize: 12,
                    color: "#fff",
                },
                emphasis: {
                    label: {
                        show: true,
                    },
                },
                data: result,
            },
        ],
    };

    return option;
};
const data = reactive({})

onMounted(() => {
    // 初始化画布

    const map = echarts.init(mapDom.value);
    // 画布的点击事件 点击进行请求

    map.showLoading();
    axios
        .get(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`)
        .then((res: any) => {
            // 存一次数据 用来找子级
            mapData.value = res.data;
            // registerMap 注册一个地图   mapData 地图的数据包 根据不同的数据渲染不同的地图
            echarts.registerMap("china", res.data);
            // 这个调用是进行地图的渲染
            mapRender();
            map.hideLoading()
        });
    axios
        .get("/api/news/wap/fymap2020_data.d.json?_=1580892522427")
        .then((res: any) => {
            // 将数据备份一次 用来查找子级
            mapEpidemic.value = res.data.data.list;
            // 这个调用是疫情数据的渲染  mapRender 处理数据的函数
            showInfoData.value = res.data.data
            rankChartOption.value.xAxis.data = res.data.data.jwsrTop.map((item: { name: string; }) => {
                return item.name
            })
            rankChartOption.value.series[0].data = res.data.data.jwsrTop.map((item: { jwsrNum: number; }) => {
                return item.jwsrNum
            })
            const boxinit1 = echarts.init(box1.value)
            boxinit1.showLoading();
            boxinit1.setOption(rankChartOption.value);
            boxinit1.hideLoading();
            let data = mapRender(res.data.data.list);
            // option 数据传入进去 设置数据
            map.setOption(data);
        });

    map.on("click", function (res: any) {
        // 这个是出自 地图子级的id
        let abcode = mapData.value.features.find(
            (item: any) => item.properties.name == res.name
        );
        // 拿到子级区的id 在下面的axios 进行请求
        let dataCity = abcode.properties.adcode;
        childrenId.value = dataCity;

        // 获取疫情地图 区级的数据
        let EpidemicData = mapEpidemic.value.find((value: any) => {
            return value.value == res.value;
        });
        // 请求地图的数据 以及疫情的数据
        axios
            .get(
                `https://geo.datav.aliyun.com/areas_v3/bound/${childrenId.value}_full.json`
            )
            .then((res: any) => {
                echarts.registerMap("china", res.data);
                return res.data
            }).then(data => {
                map.setOption(mapRender(EpidemicData.city, data.features));
                map.resize()
                map.hideLoading()
            })
    });


});
</script>
<style scoped lang='scss'>
.rank {
    height: 200px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow: hidden;

    div {
        width: 50%;
        display: flex;
    }
}
</style>